import { useState } from "react";
import "./index.scss";
import { Outlet, NavLink } from "react-router-dom";
import WorkItem from "./WorkItem";
import morning from '../../assets/早安你好.png'
import picture from "../../assets/图.png";
import dataimg from '../../assets/分发数据.png'
function Workbenches() {
  const tabData = [
    {
      tab: "全部",
      content: [
        {
          type: "海报",
          name: "易企秀海报制作",
          date: "2025-01-16",
          size: "(800*800像素)",
        },
        {
          type: "互动",
          name: "易企秀活动",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
        {
          type: "长页",
          name: "渐变金融财富管理交流会邀...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
        {
          type: "海报",
          name: "简约清新早安励志加油宣传..",
          date: "2025-01-15",
          size: "(1125*2436像素)",
        },
        {
          type: "H5",
          name: "企业会议商务会议高端峰会...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
        {
          type: "表单",
          name: "画出你心目中最美的TA投票...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
        {
          type: "视频",
          name: "数字人关于越吃越瘦小习惯...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        }
      ],
    },
    {
      tab: "H5",
      content: [
        {
          type: "H5",
          name: "企业会议商务会议高端峰会...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
      ],
    },
    {
      tab: "海报",
      content: [
        {
          type: "海报",
          img:picture,
          name: "易企秀海报制作",
          date: "2025-01-16",
          size: "(800*800像素)",
        },
        {
          type: "海报",
          img:morning,
          name: "简约清新早安励志加油宣传...",
          date: "2025-01-15",
          size: "(1125*2436像素)",
        },
      ],
    },
    {
      tab: "长页",
      content: [
        {
          type: "长页",
          name: "渐变金融财富管理交流会邀...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
      ],
    },
    {
      tab: "表单",
      content: [
        {
          type: "表单",
          name: "画出你心目中最美的TA投票...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
      ],
    },
    {
      tab: "互动",
      content: [
        {
          type: "互动",
          name: "易企秀活动",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
      ],
    },
    {
      tab: "电子画册",
      content: [
        {
          type: "电子画册",
          img:dataimg,
          name: "你的作品列表为空，快去创建吧",
          content: "查看新手教程",
          create: "创作作品",
        },
      ],
    },
    {
      tab: "视频",
      content: [
        {
          type: "视频",
          name: "数字人关于越吃越瘦小习惯...",
          date: "2025-01-15",
          views: "0 浏览",
          visitors: "0 访客",
          forms: "0 表单",
        },
      ],
    },
  ];

  const [activeTab, setActiveTab] = useState("全部");
  const [scrollPosition, setScrollPosition] = useState(0);
  // const scrollStep = 300; // 每次滚动的距离

  const handleTabClick = (tab) => {
    setActiveTab(tab);
    setScrollPosition(0);
  };

  const handleMouseEnter = (e) => {
    e.target.style.borderColor = "#1261FF";
    e.target.style.color = "#1261FF";
  };

  const handleMouseLeave = (e) => {
    e.target.style.borderColor = "";
    e.target.style.color = "#000";
  };
  const slideWidth = 180; // 每个工具项的宽度，可根据实际情况调整
  const [scrollLeft, setScrollLeft] = useState(0);
  const handlePrevClick = () => {
    setScrollLeft((prevScrollLeft) => Math.max(prevScrollLeft - slideWidth, 0));
  };
  const handleNextClick = () => {
    setScrollLeft((prevScrollLeft) => prevScrollLeft + slideWidth);
  };
  return (
    <div className="myData">
      <div className="top">
        <h1>我的数据</h1>
        <h6 className="active">
          <NavLink to="/layout/workbenches/work">作品数据</NavLink>
        </h6>
        <h6 className="active">
          <NavLink to="/layout/workbenches/published">分发数据</NavLink>
        </h6>
        <span>查看更多&gt;</span>
      </div>
      <div className="content">
        <Outlet></Outlet>
      </div>
      <div className="bottom">
        <h1>作品</h1>
        <div className="tab-content-container">
          <div className="tab-container">
            {tabData.map((item) => (
              <span
                key={item.tab}
                className={`tab ${activeTab === item.tab ? "active" : ""}`}
                onClick={() => handleTabClick(item.tab)}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
              >
                {item.tab}
              </span>
            ))}
          </div>
          <div className="bottom-bottom">
            <button
            className="button"
            onClick={handlePrevClick}
          >
            &lt;
          </button>
          <div
            style={{
              scrollBehavior: "smooth",
              whiteSpace: "nowrap",
              transform: `translateX(-${scrollLeft}px)`,
            }}
          >
            <div
            className="content-container"
            style={{ scrollLeft: scrollPosition }}
          >
            {tabData
              .find((item) => item.tab === activeTab)
              .content.map((item, index) => (
                <WorkItem
                  style={{
                    display: "inline-block",
                    width: `${slideWidth}px`,
                    marginRight: "-40px",
                  }}
                  key={index}
                  item={item}
                />
              ))}
            </div>
          </div>
          <button
            className="button-next"
            onClick={handleNextClick}
          >
          &gt;
          </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Workbenches;
